import React, { Component } from 'react'
import {NavLink,Route} from 'react-router-dom'
import './App.css'
import Home from './components/Home'
import About from './components/About'
/* 
   本小节演示了NavLink组件的使用，对于一些路由组件来说，很多时候我们会有这样一种需求
   即点击该标签时，标签进行高亮显示。一般来说这种操作都是通过追加class属性来实现的
   Link标签并没有直接帮我们完成这种需求，但NavLink就帮助我们把这种场景的应用api封装了进去
   我们只需要传入activeClassName指定具体追加的属性即可。
   需要注意的是，如果追加的高亮属性命名是 active时，可以省略
  
*/
export default class App extends Component {


    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-offset-2 col-xs-8">
                        <div className="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 
                            使用Link标签代替 a 标签，这一步是用于实现第一步：浏览器URL的变更
                            */}
                            <NavLink activeClassName="active" className="list-group-item" to='/about'>About</NavLink>
                            <NavLink activeClassName="active" className="list-group-item" to='/home'>Home</NavLink>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/* 
                                在App.js中，定义路由，路由规定了path对应跳转的组件
                                */}
                                <Route path="/about" component={About}/>
                                <Route path="/home" component={Home}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
